<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="baselayout/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/sparkol.css">
<title>Spark综合处理平台</title>
<style>
.minh{
	min-height:100%;
}
</style>
</head>
<body>


<div class="container minh">
	<div class="masthead">
	    <p class="lead">
	      <a href="/">
	      <img src="${staticPath}/assets/images/spark-logo-trademark.png" style="height:100px; width:auto; vertical-align: bottom; margin-top: 20px;"></a>
	      <span class="tagline">
	          Lightning-fast cluster computing
	      </span>
	      <span class="banner">
	      	北京交通大学数据挖掘与分析实验室
	      </span>
	      
	    </p>
	    <div class="console-title">系统控制台</div>
	  
	</div>
	<div class="menu">
		<ul>
			<li class="menucurrent list list1" data-tip="显示全局数据">全局统计数据</li>
			<li class="list list2" data-tip="基于公众号和个人的分析">舆情监控</li>
			<li class="list list3" data-tip="文本分类相关">提交分类任务</li>
			<li class="list list4" data-tip="模型优化,参数调整">模型优化</li>
		</ul>
	
	</div>
	<div class="wrapper">
		<div class="content">
			<div class="tab tab1">
				<div class="tabcontent tab1-content">
					<div class="tab-header">
							<p>该模块显示全部数据统计,包含文档分类,公众号分类,抓取到的公众号数量等全局统计数据</p>
						
					</div>
					<div class="tab-body">
						<p>系统中微信号数目:<strong>23333</strong>个<a href="javascript:void(0)" onclick="toFigure(0)">点击查看公众号主体成分比重</a></p>
						<p>系统中文章数目:<strong>2333333</strong>篇<a href="javascript:void(0)" onclick="toFigure(2)">点击查看文章数目TOP5公众号</a></p>
						<p>系统中阅读记录:<strong>6666678</strong>个<a href="javascript:void(0)" onclick="toFigure(3)">点击查看阅读记录成分构成</a>
						<p>系统中文本类别构成<a href="javascript:void(0)" onclick="toFigure(8)">点击查看</a>	
						<p>用户不同时间段阅读分布<a href="javascript:void(0)" onclick="toFigure(9)">点击查看</a></p>
					</div>
					<div class="tab-footer">
					</div>
				</div>
			</div>
			<div class="tab tab2">
				<div class="tabcontent tab2-content">
					<div class="tab-header">
							<p>舆情分析模块,趋势图</p>
					</div>
					<div class="tab-body">
						<p>用户阅读量:<strong>23333</strong>人次<a href="javascript:void(0)" onclick="toFigure(1)">点击公众号主体比重</a></p>
						<p>公众号阅读量TOP5<a href="javascript:void(0)" onclick="toFigure(4)">点击查看</a></p>
						<p>系统中现存的文章数目变化图<a href="javascript:void(0)" onclick="toFigure(5)">点击查看</a></p>
						<p>用户年龄段分布<a href="javascript:void(0)" onclick="toFigure(6)">点击查看</a></p>
						<p>用户地区分布<a href="javascript:void(0)" onclick="toFigure(7)">点击查看</a></p>
						<p>微信公众号阅读量变化曲线图<a href="javascript:void(0)" onclick="toFigure(10)">点击查看</a></p>
					</div>
					<div class="tab-footer">
					</div>
				</div>
			</div>
			<div class="tab tab3">
				<div class="tabcontent tab3-content">
					<div class="tab-header">
							<p>文本分类模型分析模块</p>
					</div>
					<div class="tab-body">
						<p>已有标注好的训练集数量:<strong>9657</strong></p>
						<p>待分类数据量:<strong>23333</strong>个<a>点击设置分类数量</a></p>
						<p>使用模型
							<select>
							  <option value ="nb">NaiveBayes</option>
							  <option value ="gbdt">GBDT</option>
							  <option value="dt">DT</option>
							  <option value="svm">SVM</option>
							</select>
						</p>	
						<p class="text-center"><button class="button button-primary">提交</button></p>
					</div>
					<div class="tab-footer">
						<button>BCD</button>
						<button>EFG</button>
					</div>
				</div>
			</div>
			<div class="tab tab4">
				<div class="tabcontent tab4-content">
					<div class="tab-header">
							<p>文本分类模型优化模块</p>
					</div>
					<div class="tab-body">
						<p>查看当前模型参数
							<select>
							  <option value ="nb">NaiveBayes</option>
							  <option value ="gbdt">GBDT</option>
							  <option value="dt">DT</option>
							  <option value="svm">SVM</option>
							</select>
						</p>	
						<p>参数设置<a>点击进入参数设置页面</a></p>
					</div>
					<div class="tab-footer">
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<%@ include file="baselayout/footer.jsp"%>
<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script type="text/javascript">
	var classbak = "content show"
	$(".list").each(function(idx,item,arr){
		self = $(this);

		(function(li){
			var liclassbak = "list list"
			li.click(function(){	
				var idx = li.attr('class').slice(-1);
				li.parent().children().each(function(){
					var that = $(this);
					that.attr('class',liclassbak+that.attr('class').slice(-1));
				});
				li.attr('class','menucurrent '+liclassbak+idx);
				$(".content").attr('class',classbak+idx);
				
			})
		})(self);
		
	})

	function toFigure(seq){
		 function Post(URL, PARAMTERS) {
	            //创建form表单
	            var temp_form = document.createElement("form");
	            temp_form.action = URL;
	            //如需打开新窗口，form的target属性要设置为'_blank'
	            temp_form.target = "_self";
	            temp_form.method = "post";
	            temp_form.style.display = "none";
	            //添加参数
	            for (var item in PARAMTERS) {
	                var opt = document.createElement("textarea");
	                opt.name = PARAMTERS[item].name;
	                opt.value = PARAMTERS[item].value;
	                temp_form.appendChild(opt);
	            }
	            document.body.appendChild(temp_form);
	            //提交数据
	            temp_form.submit();
	            temp_form.remove();
	        }
		 
		var data =  [
			             ['highcharts.do',{'ratio':{'个人':50,'公司':22,'组织':11,'其他':17},'title':'系统微信号构成','subTitle':'2017年1月-2017年2月'},'pie'],
			             ['highcharts.do',{'ratio':{'娱乐':37.5,'生活':50,'时尚':10.5,'其它':2},'title':'微信号文章所占比重','subTitle':'2017年1月-2017年2月'},'pie'],
			             ['highcharts.do',{'x':['数据玩家','数据科学DataScience','前端大全','算法与数学之美','世纪钟前的学士后'],'y':[423,233,125,108,64],'title':'阅读前TOP5的公众号','subTitle':'2017年1月-2017年2月','valueSuffix':'万次','sName':'阅读量'},'column'],
			             ['highcharts.do',{'ratio':{'娱乐':46.6,'政治':22.2,'社会':11.2,'其他':20},'title':'系统中阅读记录成分结构','subTitle':'2017年1月-2017年2月'},'pie'],
			             ['highcharts.do',{'x':['北京交通大学','北京交通大学计算机学院','世纪钟前的学士后','北京交通大学学生会','算法与数学之美'],'y':[333,233,111,88,66],'title':'阅读TOP5微信号','subTitle':'2017年1月-2017年2月','sName':'阅读量','valueSuffix':'万次'},'column'],
			             ['highcharts.do',{'x':['-5','-4','-3','-2','-1','now'],'y':[99,45,77,32,5,44],'title':'系统数据量变化趋势图','subTitle':'每小时统计一次','sName':'数据量(条)','valueSuffix':'万条'},'line'],	            
			             ['highcharts.do',{'ratio':{'0-15':12.4,'16-25':36.5,'26-35':24.5,'35-45':15.4,'45以上':11.3},'title':'用户年龄段构成','subTitle':'2017年1月-2017年2月'},'pie'],
			             ['highmaps.do',{'data':[23,22,43,42,55,46,76,77,23,26,57,38,63,65,34,72,44,23,45,46,23,12,64,56,23,65,23,23,67,34,34,65,56,23,65],'title':'用户地域构分布图','subTitle':'2017年1月-2017年2月','tooltipStr':'人数'},'map'],
			             ['highcharts.do',{'ratio':{'政治军事':2.34,'文化宗教':9.01,'时尚设计':2.30,'教育':3.00,'农业环境':0.6,'生活':23.44,'社会':6.59,'科技':3.46,'体育娱乐':5.85,'能源地产':1.05,'旅游':2.20,'财经':3.91,'广告':13.54,'其他':20.34,'育儿':2.31},'title':'系统现有数据类别分布图','subTitle':'总数据量9698条'},'pie'],
			             ['stackedcolumn.do',{'x':['7-9','12-13','18-19','20-21','22-23'],'y':[[5, 3, 4, 7, 2],[2, 2, 3, 2, 1],[3, 4, 4, 2, 5]],'z':['时尚','娱乐','生活'],'title':'用户不同时间段阅读构成','subTitle':'阅读量(单位:篇)'},'stackedcolumn'],
			             ['highcharts.do',{'x':['12小时前','11小时前','10小时前','9小时前','8小时前','7小时前','6小时前','5小时前','4小时前','3小时前','2小时前','1小时前'],'y':[44,45,14,94,99,45,77,32,5,44,26,75],'title':'微信公众号阅读量变化曲线图','subTitle':'最近一天访阅读量变化图','sName':'阅读数(人次)','valueSuffix':'人次'},'line'],	 
		             ]
				
		var form = $("#private")[0];
		form.action = data[seq][0];
		$("#private input").val(JSON.stringify(data[seq][1]));
		$("#private input:nth-child(2)").val(data[seq][2]);
		form.submit();
	}
	

</script>
<form id="private" action="highcharts.do" method="post" target="_blank">
<input type="hidden" name="chart" value="">
<input type="hidden" name="type" value="">


</form>
</body>
</html>